<template>
	<view class="pages-index" :class="{'active':noScroll}">
		<view class="top-tips ">
			<view class="top-tips-text">望天，我平台拒绝向未成年人提供服务。</view>
		</view>

		<view v-if="version === 'A1'">
			<view class="top">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/top-b.png" mode="widthFix" alt=""
					class="topBg"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/round3.png" mode="widthFix" alt=""
					class="round"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon3.png" mode="widthFix" alt=""
					class="icon1"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon2.png" mode="widthFix" alt=""
					class="icon2"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon1.png" mode="widthFix" alt=""
					class="icon3"></image>
			</view>
			<view class="birth" :class="{'active':formInfo.needExtraServe === 1}" style="height: 880rpx;">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/01%402x2s-a.png?v=3221" alt=""
					class="bg bg1" mode="widthFix"></image>
				<view class="swiper-box">
					<view>
						<swiper class="swiper" circular :vertical="true" :indicator-dots="false" :autoplay="true"
							:interval="2000" :duration="500">
							<swiper-item v-for="(item,index) in userArr">
								<view class="flex align-center padding-tb-xs">
									<view class="img">
										<image mode="widthFix" :src="item.img"></image>
									</view>
									<view>
										<view class="text-sm margin-bottom-xs">{{ item.name }}</view>
										<view class="text-sm">{{ item.timer }}分钟前测试 打
											{{ item.fenshu }} 分好评
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="total-num">
						<view> 已有 {{ totalNum }} 人</view>
						<view>领取建议报告</view>
					</view>
				</view>

				<view class="form-name">
					<input type="text" class="input" placeholder="请输入您的姓名(必须汉字)" v-model="formInfo.name"
						placeholder-style="color:#81b3ff" @blur="whereInput" />
				</view>

				<view class="form-sex flex align-center justify-around">
					<view class="sex-item" :class="{'active':formInfo.sex === 1}" @click="formInfo.sex = 1">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg.png?v=123" mode="widthFix">
						</image>
						<text>男</text>
					</view>
					<view class="sex-item" :class="{'active':formInfo.sex === 2}" @click="formInfo.sex = 2">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg2.png?v=123" mode="widthFix">
						</image>
						<text>女</text>
					</view>
				</view>

				<view class="form-birthday" @click="openBetterCalendar">
					<input type="text" readonly class="input" placeholder="请选择您的出生日期" v-model="formInfo.birthdayText"
						placeholder-style="color:#81b3ff" disabled />
				</view>

				<view class="tips" style="bottom: 50rpx;">
					本系统接入了最新Ai大数据，根据您的信息匹配最佳人生建议！Ai虽强大但不是全能。看完结果后，希望能给您带来心灵净化，仅供娱乐，如有疑问联系客服。
				</view>

			</view>
			<view class="btn" @click="toProp">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png?v=2" alt="" class="indexBtn">
				</image>
			</view>
		</view>
		<view v-if="version === 'B1'">
			<view class="top">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/top-a.png" mode="widthFix" alt=""
					class="topBg"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/round3.png" mode="widthFix" alt=""
					class="round"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon3.png" mode="widthFix" alt=""
					class="icon1"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon2.png" mode="widthFix" alt=""
					class="icon2"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon1.png" mode="widthFix" alt=""
					class="icon3"></image>
			</view>
			<view class="birth" :class="{'active':formInfo.needExtraServe === 1}">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/01@2x2s.png?v=1243" alt="" class="bg bg1"
					mode="widthFix" v-show="formInfo.needExtraServe === 1"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/01@2x2d.png?v=1243" alt="" class="bg bg1"
					mode="widthFix" v-show="formInfo.needExtraServe === 2"></image>

				<view class="swiper-box">
					<view>
						<swiper class="swiper" circular :vertical="true" :indicator-dots="false" :autoplay="true"
							:interval="2000" :duration="500">
							<swiper-item v-for="(item,index) in userArr">
								<view class="flex align-center padding-tb-xs">
									<view class="img">
										<image mode="widthFix" :src="item.img"></image>
									</view>
									<view>
										<view class="text-sm margin-bottom-xs">{{ item.name }}</view>
										<view class="text-sm">{{ item.timer }}分钟前测试 打
											{{ item.fenshu }} 分好评
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="total-num">
						<view> 已有 {{ totalNum }} 人</view>
						<view>领取生辰报告</view>
					</view>
				</view>

				<view class="form-name">
					<input type="text" class="input" placeholder="请输入您的姓名(必须汉字)" v-model="formInfo.name"
						placeholder-style="color:#81b3ff" @blur="whereInput" />
				</view>

				<view class="form-sex flex align-center justify-around">
					<view class="sex-item" :class="{'active':formInfo.sex === 1}" @click="formInfo.sex = 1">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg.png?v=123" mode="widthFix">
						</image>
						<text>男</text>
					</view>
					<view class="sex-item" :class="{'active':formInfo.sex === 2}" @click="formInfo.sex = 2">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg2.png?v=123" mode="widthFix">
						</image>
						<text>女</text>
					</view>
				</view>

				<view class="form-birthday" @click="openBetterCalendar">
					<input type="text" readonly class="input" placeholder="请选择您的出生日期" v-model="formInfo.birthdayText"
						placeholder-style="color:#81b3ff" disabled />
				</view>

				<view class="needJh">
					<view class="title"> 是否需要导师解惑</view>
					<view class="chooseSlider" @click="formInfo.needExtraServe = formInfo.needExtraServe === 1?2:1">
						<view :class="{'active':formInfo.needExtraServe === 1}">
							<text>不需要</text>
						</view>
					</view>
				</view>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luru.png" class="title-btn"
					v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0"></image>
				<view class="desc-btn-list" v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0">
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/wenzi.png" class="desc-btn"
						@click="formInfo.needExtraServeType = 1">
					</image>
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/yuyin.png" class="desc-btn"
						@click="formInfo.needExtraServeType = 2"></image>
				</view>

				<view class="desc-text " v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 1">
					<view class="desc-title">描述一下您当下需要寻求帮助/解惑/陪伴的问题诉求，请尽量详细！</view>
					<view class="text-info">
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
							@click="formInfo.needExtraServeType = 0"></image>
						<textarea placeholder="请在此输入您的诉求" v-model="formInfo.customContent"></textarea>
					</view>
				</view>

				<view class="desc-audio " v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 2">
					<view class="desc-title">描述一下您当下需要寻求帮助/解惑/陪伴的问题诉求，请尽量详细！</view>
					<view class="text-info">
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
							@click="formInfo.needExtraServeType = 0"></image>
						<view class="play-audio" v-show="audioState === 2" @click="playVoice">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/play-btn.png"
								class="audio-play"></image>
							<image v-show="playState"
								src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangzhong.gif"
								class="audio-gif"></image>
							<image v-show="!playState"
								src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangxian.png" class="audio-png">
							</image>
							<text id="voiceTime">{{ formInfo.voiceTime }}"</text>
						</view>
						<view class="star-box" @click="startAudio" v-show="audioState === 0">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png" class="star-btn">
							</image>
							<view>开始录音</view>
						</view>
						<view class="ing-box" @click="endRecord" v-show="audioState === 1">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luyinzhong.gif"
								class="star-btn"></image>
							<view>正在录音,点击结束录制</view>
						</view>
						<view class="end-box" @click="startAudio" v-show="audioState === 2">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png" class="star-btn">
							</image>
							<view>重新录音</view>
						</view>
					</view>
				</view>

				<view class="tips">
					本系统接入了最新Ai大数据，根据您的信息匹配最佳人生建议！Ai虽强大但不是全能。看完结果后，希望能给您带来心灵净化，仅供娱乐，如有疑问联系客服。
				</view>

			</view>
			<view class="btn" @click="toProp">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png?v=2" alt="" class="indexBtn">
				</image>
			</view>
		</view>
		<view v-if="version === 'C1'">
			<view class="top">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/top.png" mode="widthFix" alt=""
					class="topBg"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/round3.png" mode="widthFix" alt=""
					class="round"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon3.png" mode="widthFix" alt=""
					class="icon1"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon2.png" mode="widthFix" alt=""
					class="icon2"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/icon1.png" mode="widthFix" alt=""
					class="icon3"></image>
			</view>
			<view class="birth" :class="{'active':formInfo.needExtraServe === 1}">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/01@2x2s.png?v=1243" alt="" class="bg bg1"
					mode="widthFix" v-show="formInfo.needExtraServe === 1"></image>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/01@2x2d.png?v=1243" alt="" class="bg bg1"
					mode="widthFix" v-show="formInfo.needExtraServe === 2"></image>

				<view class="swiper-box">
					<view>
						<swiper class="swiper" circular :vertical="true" :indicator-dots="false" :autoplay="true"
							:interval="2000" :duration="500">
							<swiper-item v-for="(item,index) in userArr">
								<view class="flex align-center padding-tb-xs">
									<view class="img">
										<image mode="widthFix" :src="item.img"></image>
									</view>
									<view>
										<view class="text-sm margin-bottom-xs">{{ item.name }}</view>
										<view class="text-sm">{{ item.timer }}分钟前测试 打
											{{ item.fenshu }} 分好评
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="total-num">
						<view> 已有 {{ totalNum }} 人</view>
						<view>领取生辰报告</view>
					</view>
				</view>

				<view class="form-name">
					<input type="text" class="input" placeholder="请输入您的姓名(必须汉字)" v-model="formInfo.name"
						placeholder-style="color:#81b3ff" @blur="whereInput" />
				</view>

				<view class="form-sex flex align-center justify-around">
					<view class="sex-item" :class="{'active':formInfo.sex === 1}" @click="formInfo.sex = 1">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg.png?v=123" mode="widthFix">
						</image>
						<text>男</text>
					</view>
					<view class="sex-item" :class="{'active':formInfo.sex === 2}" @click="formInfo.sex = 2">
						<image src="https://ydh5res.onlineweixin.com/cy/index_files/sexImg2.png?v=123" mode="widthFix">
						</image>
						<text>女</text>
					</view>
				</view>

				<view class="form-birthday" @click="openBetterCalendar">
					<input type="text" readonly class="input" placeholder="请选择您的出生日期" v-model="formInfo.birthdayText"
						placeholder-style="color:#81b3ff" disabled />
				</view>

				<view class="needJh">
					<view class="title"> 是否需要导师解惑</view>
					<view class="chooseSlider" @click="formInfo.needExtraServe = formInfo.needExtraServe === 1?2:1">
						<view :class="{'active':formInfo.needExtraServe === 1}">
							<text>不需要</text>
						</view>
					</view>
				</view>
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luru.png" class="title-btn"
					v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0"></image>
				<view class="desc-btn-list" v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 0">
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/wenzi.png" class="desc-btn"
						@click="formInfo.needExtraServeType = 1">
					</image>
					<image src="https://ydh5res.onlineweixin.com/cy2/index_files/yuyin.png" class="desc-btn"
						@click="formInfo.needExtraServeType = 2"></image>
				</view>

				<view class="desc-text " v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 1">
					<view class="desc-title">描述一下您当下需要寻求帮助/解惑/陪伴的问题诉求，请尽量详细！</view>
					<view class="text-info">
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
							@click="formInfo.needExtraServeType = 0"></image>
						<textarea placeholder="请在此输入您的诉求" v-model="formInfo.customContent"></textarea>
					</view>
				</view>

				<view class="desc-audio " v-show="formInfo.needExtraServe === 1 && formInfo.needExtraServeType === 2">
					<view class="desc-title">描述一下您当下需要寻求帮助/解惑/陪伴的问题诉求，请尽量详细！</view>
					<view class="text-info">
						<image src="https://ydh5res.onlineweixin.com/cy2/index_files/back.png" class="back-btn"
							@click="formInfo.needExtraServeType = 0"></image>
						<view class="play-audio" v-show="audioState === 2" @click="playVoice">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/play-btn.png"
								class="audio-play"></image>
							<image v-show="playState" @click="playState = false"
								src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangzhong.gif"
								class="audio-gif"></image>
							<image v-show="!playState" @click="playState = true"
								src="https://ydh5res.onlineweixin.com/cy2/index_files/bofangxian.png" class="audio-png">
							</image>
							<text id="voiceTime">{{ formInfo.voiceTime }}"</text>
						</view>
						<view class="star-box" @click="startAudio" v-show="audioState === 0">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png" class="star-btn">
							</image>
							<view>开始录音</view>
						</view>
						<view class="ing-box" @click="endRecord" v-show="audioState === 1">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/luyinzhong.gif"
								class="star-btn"></image>
							<view>正在录音,点击结束录制</view>
						</view>
						<view class="end-box" @click="startAudio" v-show="audioState === 2">
							<image src="https://ydh5res.onlineweixin.com/cy2/index_files/star-btn.png" class="star-btn">
							</image>
							<view>重新录音</view>
						</view>
					</view>
				</view>

				<view class="tips">
					本系统接入了最新Ai大数据，根据您的信息匹配最佳人生建议！Ai虽强大但不是全能。看完结果后，希望能给您带来心灵净化，仅供娱乐，如有疑问联系客服。
				</view>

			</view>
			<view class="btn" @click="toProp">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png?v=2" alt="" class="indexBtn">
				</image>
			</view>
		</view>


		<view class="desc" @click="toTop">
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/02@2x_02m.png?v=101" alt=""
				mode="widthFix"></image>
			<image class="desc-img" src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/baogao-a.jpg"
				v-if="version === 'A1'" alt="" mode="widthFix"></image>
			<image class="desc-img" src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/index_files/baogao-b.jpg"
				v-if="version === 'B1'" alt="" mode="widthFix"></image>
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/03@2xm.png?v=101"
				v-if="version === 'C1'" alt="" mode="widthFix"></image>
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/03@2xm-1.png?v=100" alt=""
				mode="widthFix"></image>
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/three@1m.png?v=100" alt=""
				mode="widthFix"></image>
			<image class="desc-img" src="https://ydh5res.onlineweixin.com/cy2/index_files/four@1m.png?v=100" alt=""
				mode="widthFix"></image>
			<!-- <view class="m-box">
				<view class="m-box__title">
				  <text>98%用户好评</text>
				</view>
				<view id="publicFeedbackScroll" class="user_feedback">
				  <view class="uf_ul" :style="{top: scrollTop + 'rpx'}">
					<view class="li">
					  <text class="text-bold">赵先生 166****9078</text>
					  <text>(八字测终生运)</text>
					  <view>
						我是一个大学生，新加入的大学环境让我很不适应，之前一直是个内向的人，看着同学们在学校洋溢着自己的青春，很是羡慕。不知道如何放开自己，听了老师的建议，知道该先认可自己，我能考上985的大学还有什么可顾虑的，慢慢的一点点的适应它。
					  </view>
					</view>
					<view class="li">
					  <text class="text-bold">陈女士 159****5428</text>
					  <text>(八字测终生运)</text>
					  <view>
						我最近一直不顺，听了专业老师给我的解说，确实豁然开朗。希望从此能和老师教个朋友，身边能有一位这样的好友倍感荣幸。
					  </view>
					</view>
					<view class="li">
					  <text class="text-bold">王先生 138****7018</text>
					  <text>(八字测终生运)</text>
					  <view>
						我儿子29岁一直没有恋爱，很多情况都是家庭成长给他的心理压力造成的，听完建议后特别感谢老师的解答。
					  </view>
					</view>
					<view class="li">
					  <text class="text-bold">吴女士 139****4595</text>
					  <text>(八字测终生运)</text>
					  <view>
						我的事业并不是特别顺利，很多问题不只是自己能力上的不足，心态很重要，选对方向很重要，听完老师的建议，我也愿意重新尝试一下自己，给自己一个新的挑战，感谢老师，以后有问题，再问您希望别嫌我烦哦。
					  </view>
					</view>
					<view class="li">
					  <text class="text-bold">李先生 158****5478</text>
					  <text>(八字测终生运)</text>
					  <view>
						我的人际关系一直不太好，总是处理不好身边朋友的关系，听了老师的分析虽然没有完全茅塞顿开，毕竟悟性有限，但也知道了自己的缺点，以后听从老师的建议，慢慢的去改变自己。
					  </view>
					</view>
				  </view>
				</view>
			  </view> -->

		</view>


		<!-- <view @click="copy" class="public_footer_help">
				如需帮助
			  <uni-icons type="headphones" size="20" color="#fff" class="margin-lr-xs"></uni-icons>
			  请联系QQ售后客服
			</view> -->
		<view style="height: 140rpx;">
			<view class="scrollBtn" v-if="footerShow" @click="toTop">
				<image src="https://ydh5res.onlineweixin.com/cy2/index_files/btn@2x.png" alt=""></image>
			</view>
		</view>

		<dLoading :status="!version" v-if="!version"></dLoading>


		<e-run-calendar ref="betterCalendarRef" :showCalendar="showCalendar" @confirm="selectDate" :isHourShow="true"
			@cancel="showCalendar = false" :selectOptions="selectOptionsArr"></e-run-calendar>
		<!-- <better-calendar ref="betterCalendarRef" :showCalendar="showCalendar" @confirm="selectDate"
			@cancel="showCalendar = false"></better-calendar> -->


		<view class="right-btn flex align-center justify-between flex-direction">
			<view @click="toPage('/pages/orderList/orderList')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/chaxun.png" mode="widthFix"
					alt=""></image>
				<view>
					订单查询
				</view>
			</view>
			<view style="width: 30rpx;border-bottom: 2rpx solid #fff;margin: 15rpx 0;"></view>
			<view @click="toPage('/pages/msg/index')">
				<image src="https://yundao888.oss-cn-beijing.aliyuncs.com/cy2/bzinfo_files/zhuyi.png" mode="widthFix"
					alt=""></image>
				<view>
					售后客服
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from "dayjs";
	import {
		alitaskAuth,
		dytaskAuth,
		getType,
		submitInfo
	} from "../../api";
	import eRunCalendar from "@/uni_modules/e-run-calendar/components/e-run-calendar/e-run-calendar.vue"

	import {
		userList
	} from "../../tools/const";
	import {
		confirm,
		toast,
		toPage
	} from "../../tools";
	import {
		APPID
	} from "../../config";
	import {
		calendar
	} from "../../components/better-calendar/calendar";

	export default {
		data() {
			const INIT_DAY_TYPE = "solar";
			const INIT_DAY_TIMESTAMP = dayjs().valueOf();
			const INIT_DAY = dayjs().format("YYYY-MM-DD");
			return {
				noScroll: false,
				version: '',
				scrollTop: 0,
				timer: null,
				footerShow: false,
				totalNum: '*',
				userArr: [],
				userList: userList,

				recorderManager: {},
				innerAudioContext: {},
				Animal: '',
				submitBirthday: {},
				formInfo: {
					name: '',
					sex: '',
					birthday: '',
					birthday2: '',
					birthdayText: '',
					needExtraServe: 2, // 1:需要 2:不需要
					needExtraServeType: 0, // 0:不选  1:文字  2:语言
					customContent: '', // 自定义内容
					voice: '', // 语音
					voiceTime: 0, // 语音时长
					wechatNumber: '', // 预留的微信号
				},
				voiceTimer: null,

				audioState: 0,
				playState: false,

				showCalendar: false,
				date: {
					type: INIT_DAY_TYPE, // 类型
					timestamp: INIT_DAY_TIMESTAMP, // 时间戳
					solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
					lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
					lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
				},

				celenderValue: '', //选择值
				selectOptionsArr: [15, 0, 0, 0] //起始年份

			}
		},
		components: {
			eRunCalendar
		},
		onLoad() {

		},
		onShow() {
			this.recorderManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();

			// 为了防止苹果手机静音无法播放
			// uni.setInnerAudioOption({
			//   obeyMuteSwitch: false
			// })

			this.innerAudioContext.autoplay = true;

			console.log("uni.getRecorderManager()", uni.getRecorderManager())
			let self = this;
			this.recorderManager.onStop(function(res) {
				self.formInfo.voiceTime = parseInt(res.duration / 1000)
				uni.uploadFile({
					url: 'https://cydl.hbmingpai.com/index.php/index/index/douYinAppletUploadToOss', //仅为示例，非真实的接口地址
					filePath: res.tempFilePath,
					name: 'audioData',

					success: (uploadFileRes) => {
						console.log("uploadFileRes", uploadFileRes)
						self.formInfo.voice = JSON.parse(uploadFileRes.data).data;
					}
				});


				// self.formInfo.voice = 'https://yundao888.oss-cn-beijing.aliyuncs.com/demo/horse.mp3';
			});
			this.innerAudioContext.onPlay(function() {
				self.playState = true
			});
			this.innerAudioContext.onEnded(function() {
				self.playState = false
			});
			this.innerAudioContext.onStop(function() {
				self.playState = false
			})

			this.login()
			this.totalNum = ((new Date().getTime() / 100).toFixed(0).toString().slice(3, 9))
			this.getUserList()
			clearInterval(this.timer)
			this.timer = setInterval(() => {
				this.scrollTop--
				if (this.scrollTop <= -950) {
					this.scrollTop = 0
				}
			}, 50)
		},
		methods: {
			toPage,
			// 支付宝小程序登录逻辑
			alipayLogin() {
				uni.login({
					success: async (loginRes) => {
						const res = await alitaskAuth({
							code: loginRes.code,
						})

						if (res.status === 200) {
							uni.setStorageSync('openid', res.data.id)
							this.$store.state.openid = res.data.id

							const data2 = await getType({
								appid: APPID
							})
							if (data2.status === 200) {
								this.version = data2.data.version
							}
						}
					}
				});
			},
			// 抖音小程序登录逻辑
			dypayLogin() {
				uni.login({
					success: async (loginRes) => {
						// 访问后端接口,传递code appid 拿到想要的信息 比如openid
						const res = await dytaskAuth({
							code: loginRes.code,
						})
						if (res.status === 200) {
							// 缓存一份openid信息
							uni.setStorageSync('openid', res.data.tripartiteCode)
							// 保存openid信息
							this.$store.state.openid = res.data.tripartiteCode
							// 获取版本信息 A版还是B版还是C版
							const data2 = await getType({
								appid: APPID
							})
							// 保存版本信息 进而显示不同的页面
							if (data2.status === 200) {
								this.version = data2.data.version
							}
						}
					}
				});
			},
			// 登录逻辑
			async login() {
				// #ifdef MP-TOUTIAO
				this.dypayLogin()
				// #endif
				// #ifdef MP-ALIPAY
				this.alipayLogin()
				// #endif

			},
			openBetterCalendar() {
				this.noScroll = true;
				this.showCalendar = true;
			},
			async selectDate(e) {
				//  如果是公历
				console.log('e', e)
				if (e.type === "solar") {
					this.formInfo.birthday = {
						year: e.year,
						month: e.month,
						day: e.day,
					}
					this.formInfo.birthday2 = this.setSolarDate(Number(e.year), Number(e.month), Number(e.day))
					this.formInfo.birthdayText = e.text
					this.Animal = this.formInfo.birthday2.Animal
					this.submitBirthday = {
						yy: Number(this.formInfo.birthday2.cYear),
						mm: Number(this.formInfo.birthday2.cMonth),
						dd: Number(this.formInfo.birthday2.cDay),
						hh: e.hour,
						_dd: Number(this.formInfo.birthday2.lYear),
						_mm: Number(this.formInfo.birthday2.lMonth) * -1,
						_yy: Number(this.formInfo.birthday2.lDay)
					}
				}

				if (e.type === "lunar") {
					//  是农历
					this.formInfo.birthday = this.setLunarDate(Number(e.year), Number(e.month), Number(e.day), e
						.leap_month === 1)
					this.formInfo.birthday2 = {
						year: e.year,
						month: e.month,
						day: e.day,
					}
					this.formInfo.birthdayText = e.text
					this.Animal = this.formInfo.birthday.Animal

					this.submitBirthday = {
						yy: Number(this.formInfo.birthday.cYear),
						mm: Number(this.formInfo.birthday.cMonth),
						dd: Number(this.formInfo.birthday.cDay),
						hh: e.hour,
						_dd: Number(this.formInfo.birthday.lYear),
						_mm: Number(this.formInfo.birthday.lMonth) * -1,
						_yy: Number(this.formInfo.birthday.lDay)
					}
				}


				console.log(this.submitBirthday)
				this.noScroll = true;
				this.showCalendar = false;
			},

			setSolarDate(y, m, d) {
				const dt = calendar.solar2lunar(y, m, d);

				return dt;
			},
			setLunarDate(y, m, d, isLeapMonth) {
				const dt = calendar.lunar2solar(y, m, d, isLeapMonth);
				return dt;
			},


			// 验证中文名字
			checkName(str, type = 1) {
				let reg
				if (type == 1) {
					reg = /^[\u4e00-\u9fa5]{2,6}$/;
				} else {
					reg = /^[\u4e00-\u9fa5]{2,6}$/;
				}
				if (reg.test(str)) {
					return true
				} else {
					return false
				}
			},
			// 验证是否成年
			checkBirthday(yy) {
				var year = new Date().getFullYear()
				if (year - yy < 18) {
					return false
				} else {
					return true
				}
			},
			whereInput() {
				if (!this.checkName(this.formInfo.name)) {
					this.formInfo.name = "";
					toast('请输入2~6个字的中文名字~', )
				}
			},

			checkForm(birthday2, username, sex) {

				//Ming Fix end

				var y = birthday2.yy;
				var m = birthday2.mm;
				var d = birthday2.dd * 1;

				var ys = y;
				var ms = m;
				var ds = d;

				var h = birthday2.hh * 1;

				var i = 0
				m = m - 1;
				d = d - 1;
				var sTermInfo = new Array(0, 21198, 42461, 63813, 85308, 106961, 128806, 150834, 173055, 195433, 217965,
					240558, 263215, 285853, 308440, 330912, 353245, 375400, 397371, 419149, 440750, 462193, 483513,
					504747);

				function wzc(year, num) {
					var objD = new Date((31556956000 * (year - 1882) + sTermInfo[num] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					var hh = objD.getUTCHours();
					var mm = objD.getUTCMinutes();
					var ss = objD.getUTCSeconds();
					var s = num + '/(' + (objD.getUTCMonth() + 1) + "月" + objD.getUTCDate() + "日" + hh + ":" + mm + ')';
					return (s);
				}

				function sTerm_d(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					return (offDate.getUTCDate());
				}

				function sTerm_hi(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					var hi = offDate.getUTCHours() * 60 + offDate.getUTCMinutes();
					return (hi);
				}

				function sTerm_s(y, n) {
					var offDate = new Date((31556956000 * (y - 1882) + sTermInfo[n] * 60000) + Date.UTC(1882, 0, 5, 18,
						0));
					return (offDate);
				}

				var cY, cM, cD, cH;
				if (m < 2) cY = y - 1900 + 36 - 1;
				else cY = y - 1900 + 36;
				var term2 = sTerm_d(y, 2);
				if (m == 1 && (d + 1) > term2) cY = y - 1900 + 36;
				if (m == 1 && (d + 1) == term2 && (h * 60 + i) >= sTerm_hi(y, 2)) cY = y - 1900 + 36;
				var firstNode = sTerm_d(y, m * 2);
				cM = (y - 1900) * 12 + m + 12;
				var start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y, m * 2 - 2)) / 1000;
				var start_term1 = wzc(y, m * 2 - 2);
				if (m == 0) {
					start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y - 1, 22)) / 1000;
					start_term1 = wzc(y - 1, 22);
				}
				var end_term = (sTerm_s(y, m * 2) - Date.UTC(y, m, d + 1, h, i, 0)) / 1000;
				var end_term1 = wzc(y, m * 2);

				if ((d + 1) > firstNode || ((d + 1) == firstNode && (h * 60 + i * 1) >= sTerm_hi(y, m * 2))) {
					cM = (y - 1900) * 12 + m + 13;
					start_term = (Date.UTC(y, m, d + 1, h, i, 0, 0) - sTerm_s(y, m * 2)) / 1000;
					start_term1 = wzc(y, m * 2);
					end_term = (sTerm_s(y, m * 2 + 2) - Date.UTC(y, m, d + 1, h, i, 0)) / 1000;
					end_term1 = wzc(y, m * 2 + 2);
					if (m == 11) {
						end_term = (sTerm_s(y + 1, 0) - Date.UTC(y, m, d + 1, h, i, 0, 0)) / 1000;
						end_term1 = wzc(y + 1, 0);
					}
				}

				if (start_term < 0) start_term = 0;
				if (end_term < 0) end_term = 0;
				var dayCyclical = Date.UTC(y, m, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;
				cD = dayCyclical + d;
				if (h >= 23) cD = dayCyclical + d + 1;
				var nh;
				if (h == 23 || h == 1 || h == 3 || h == 5 || h == 7 || h == 9 || h == 11 || h == 13 || h == 15 || h ==
					17 || h == 19 || h == 21) {
					nh = h - 1;
					nh = nh + 2;
				} else {
					nh = h;
				}
				var houseCyclical = (Date.UTC(y, m, d + 1, nh, 0, 0, 0) / 3600000 + 25567 * 24) / 2;
				cH = houseCyclical;
				var lunarInfo = new Array(
					0x4bd8, 0x4ae0, 0xa570, 0x54d5, 0xd260, 0xd950, 0x5554, 0x56af, 0x9ad0, 0x55d2, 0x4ae0, 0xa5b6,
					0xa4d0, 0xd250, 0xd295, 0xb54f, 0xd6a0, 0xada2, 0x95b0, 0x4977, 0x497f, 0xa4b0, 0xb4b5, 0x6a50,
					0x6d40, 0xab54, 0x2b6f, 0x9570, 0x52f2, 0x4970, 0x6566, 0xd4a0, 0xea50, 0x6a95, 0x5adf, 0x2b60,
					0x86e3, 0x92ef, 0xc8d7, 0xc95f, 0xd4a0, 0xd8a6, 0xb55f, 0x56a0, 0xa5b4, 0x25df, 0x92d0, 0xd2b2,
					0xa950, 0xb557, 0x6ca0, 0xb550, 0x5355, 0x4daf, 0xa5b0, 0x4573, 0x52bf, 0xa9a8, 0xe950, 0x6aa0,
					0xaea6, 0xab50, 0x4b60, 0xaae4, 0xa570, 0x5260, 0xf263, 0xd950, 0x5b57, 0x56a0, 0x96d0, 0x4dd5,
					0x4ad0, 0xa4d0, 0xd4d4, 0xd250, 0xd558, 0xb540, 0xb6a0, 0x95a6, 0x95bf, 0x49b0, 0xa974, 0xa4b0,
					0xb27a, 0x6a50, 0x6d40, 0xaf46, 0xab60, 0x9570, 0x4af5, 0x4970, 0x64b0, 0x74a3, 0xea50, 0x6b58,
					0x5ac0, 0xab60, 0x96d5, 0x92e0, 0xc960, 0xd954, 0xd4a0, 0xda50, 0x7552, 0x56a0, 0xabb7, 0x25d0,
					0x92d0, 0xcab5, 0xa950, 0xb4a0, 0xbaa4, 0xad50, 0x55d9, 0x4ba0, 0xa5b0, 0x5176, 0x52bf, 0xa930,
					0x7954, 0x6aa0, 0xad50, 0x5b52, 0x4b60, 0xa6e6, 0xa4e0, 0xd260, 0xea65, 0xd530, 0x5aa0, 0x76a3,
					0x96d0, 0x4afb, 0x4ad0, 0xa4d0, 0xd0b6, 0xd25f, 0xd520, 0xdd45, 0xb5a0, 0x56d0, 0x55b2, 0x49b0,
					0xa577, 0xa4b0, 0xaa50, 0xb255, 0x6d2f, 0xada0, 0x4b63, 0x937f, 0x49f8, 0x4970, 0x64b0, 0x68a6,
					0xea5f, 0x6b20, 0xa6c4, 0xaaef, 0x92e0, 0xd2e3, 0xc960, 0xd557, 0xd4a0, 0xda50, 0x5d55, 0x56a0,
					0xa6d0, 0x55d4, 0x52d0, 0xa9b8, 0xa950, 0xb4a0, 0xb6a6, 0xad50, 0x55a0, 0xaba4, 0xa5b0, 0x52b0,
					0xb273, 0x6930, 0x7337, 0x6aa0, 0xad50, 0x4b55, 0x4b6f, 0xa570, 0x54e4, 0xd260, 0xe968, 0xd520,
					0xdaa0, 0x6aa6, 0x56df, 0x4ae0, 0xa9d4, 0xa4d0, 0xd150, 0xf252, 0xd520);
				var nStr1 = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
				var nStr2 = new Array('初', '十', '廿', '卅');
				var monthName = new Array("", "正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");

				function lYearDays(y) {
					var i, sum = 348;
					for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
					return (sum + leapDays(y));
				}

				function leapDays(y) {
					if (leapMonth(y)) return ((lunarInfo[y - 1899] & 0xf) == 0xf ? 30 : 29);
					else return (0);
				}

				function leapMonth(y) {
					var lm = lunarInfo[y - 1900] & 0xf;
					return (lm == 0xf ? 0 : lm);
				}

				function monthDays(y, m) {
					return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
				}


				function Lunar(objDate, hh) {
					var i, leap = 0,
						temp = 0;
					var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900,
						0, 31)) / 86400000;
					if (objDate.getHours() >= 24) {
						offset++;
					}
					if (hh === -1) {
						offset++;
					}
					for (i = 1900; i < 2100 && offset > 0; i++) {
						temp = lYearDays(i);
						offset -= temp;
					}
					if (offset < 0) {
						offset += temp;
						i--;
					}
					this.year = i;
					leap = leapMonth(i);
					this.isLeap = false;
					for (i = 1; i < 13 && offset > 0; i++) {
						if (leap > 0 && i == (leap + 1) && this.isLeap == false) {
							--i;
							this.isLeap = true;
							temp = leapDays(this.year);
						} else {
							temp = monthDays(this.year, i);
						}
						if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
						offset -= temp;
					}
					if (offset == 0 && leap > 0 && i == leap + 1)
						if (this.isLeap) {
							this.isLeap = false;
						} else {
							this.isLeap = true;
							--i;
						}
					if (offset < 0) {
						offset += temp;
						--i;
					}
					this.month = i;
					this.day = offset + 1;
				}


				function cYear(y) {
					var s;
					s = nStr1[Math.floor(y / 1000)];
					s += nStr1[Math.floor((y % 1000) / 100)];
					s += nStr1[Math.floor((y % 100) / 10)];
					s += nStr1[y % 10];
					return (s);
				}

				function cDay(d) {
					var s;
					switch (d) {
						case 10:
							s = '初十';
							break;
						case 20:
							s = '二十';
							break;
							break;
						case 30:
							s = '三十';
							break;
							break;
						default:
							s = nStr2[Math.floor(d / 10)];
							s += nStr1[d % 10];
					}
					return (s);
				}

				function lll(y, m, i, h) {
					var hh = ["00:00-00:59早子", "01:00-01:59丑", "02:00-02:59丑", "03:00-03:59寅", "04:00-04:59寅",
						"05:00-05:59卯", "06:00-06:59卯", "07:00-07:59辰", "08:00-08:59辰", "09:00-09:59巳", "10:00-10:59巳",
						"11:00-11:59午", "12:00-12:59午", "13:00-13:59未", "14:00-14:59未", "15:00-15:59申", "16:00-16:59申",
						"17:00-17:59酉", "18:00-18:59酉", "19:00-19:59戌", "20:00-20:59戌", "21:00-21:59亥", "22:00-22:59亥",
						"23:00-23:59晚子"
					];
					var sDObj = new Date(y, m, i + 1, h);
					var lDObj = new Lunar(sDObj, h);
					var lY = cYear(lDObj.year);
					var lM = monthName[lDObj.month];
					var lD = cDay(lDObj.day);
					var lL = lDObj.isLeap ? '闰' : '';
					if (h >= 0 && h < 24) {
						var lS = hh[h];
					} else {
						var lS = '未知';
					}
					var lH = lDObj.isLeap ? '闰' : '';

					return (lY + '年' + lL + lM + '月' + lD + '日' + ' ' + lS + '时')
				}

				var lDate = lll(y, m, d, h);


				var _obj = {}
				_obj.username = username
				_obj.gender = sex
				_obj.y = ys;
				_obj.m = ms;
				_obj.d = ds;
				_obj.h = h;
				_obj.i = 0;
				_obj.cY = cY;
				_obj.cM = cM;
				_obj.cD = cD;
				_obj.cH = cH;
				_obj.term1 = wzc(y, m * 2);
				_obj.term2 = wzc(y, m * 2 + 1);
				_obj.start_term = start_term;
				_obj.end_term = end_term;
				_obj.start_term1 = start_term1;
				_obj.end_term1 = end_term1;
				_obj.lDate = lDate;

				return _obj

			},

			async toProp() {
				if (!this.formInfo.name) return toast('请输入姓名')
				if (!this.formInfo.sex) return toast('请选择性别')
				if (!this.formInfo.birthday) return toast('请选择生日')

				if (this.version === 'B1' || this.version === 'C1') {
					if (this.formInfo.needExtraServe === 1) {
						if (this.formInfo.needExtraServeType === 0) {
							return toast('请填写或录制问题诉求');
						}
						if (this.formInfo.needExtraServeType === 1 && !this.formInfo.customContent) {
							return toast('请填写问题诉求');
						}

						if (this.formInfo.needExtraServeType === 2 && !this.formInfo.voice) {
							return toast('请录制问题诉求');
						}

					}
				}


				let _dataOther = {
					birthdayJson: JSON.stringify(this.submitBirthday),
					needExtraServe: this.formInfo.needExtraServe,
					needExtraServeType: this.formInfo.needExtraServeType,
					customContent: this.formInfo.customContent,
					voice: this.formInfo.voice,
					voiceTime: this.formInfo.voiceTime,
					wechatNumber: '',


				}

				let _data = this.checkForm(this.submitBirthday, this.formInfo.name, this.formInfo.sex)

				const res = await submitInfo({
					..._data,
					..._dataOther
				})
				if (res.code === 200) {
					toPage('/pages/prop/prop?birthday=' + JSON.stringify(this.submitBirthday) + '&username=' + this
						.formInfo.name + '&gender=' + this.formInfo.sex + '&zodiac==' + this.Animal + '&oid=' + res
						.oid)
				}
			},

			getUserList() {
				for (let i = 0; i < 10; i++) {
					let num = Math.floor(Math.random() * 60) + 1; //范围是[1~70]
					this.userList[num].timer = Math.floor(Math.random() * 10) + 1
					this.userList[num].fenshu = Math.floor(Math.random() * 10) + 90
					this.userArr.push(this.userList[num])
				}
			},
			copy() {

				confirm('温馨提示', '客服QQ号：1312507423 已复制，请前去咨询。', () => {
					uni.setClipboardData({
						data: '1312507423',
						success: function() {
							console.log('success');
						}
					});
				}, '确定', false)
			},


			onPageScroll(e) {
				if (e.scrollTop > 500) {
					this.footerShow = true
				} else {
					this.footerShow = false
				}
			},
			toTop() {
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 400 // string 选择器
				});
			},
			startAudio() {
				this.formInfo.voice = ''
				this.formInfo.voiceTime = 0
				this.audioState = 1
				this.recorderManager.start({
					format: 'wav'
				});
				// this.voiceTimer = setInterval(() => {
				//   this.formInfo.voiceTime += 1
				// }, 1000)
			},
			endRecord() {
				this.audioState = 2
				clearInterval(this.voiceTimer)
				this.recorderManager.stop()


			},
			playVoice() {
				if (!this.playState) {
					console.log(this.formInfo.voice)
					if (this.formInfo.voice) {

						this.innerAudioContext.src = this.formInfo.voice;
						console.log(this.innerAudioContext)
						this.innerAudioContext.play()
					}
				} else {
					this.playState = false
					this.innerAudioContext.stop()
				}

			}
		},
		watch: {
			'formInfo.needExtraServe'() {
				if (this.formInfo.needExtraServe === 2) {
					this.formInfo.needExtraServeType = 0
					this.formInfo.customContent = ''
					this.formInfo.voice = ''
					this.formInfo.voiceTime = 0
					this.formInfo.wechatNumber = ''
					this.audioState = 0
					this.playState = false
					//  执行方法 停止录音
					//  执行方法 播放
				}
			},
			'formInfo.needExtraServeType'() {
				this.formInfo.customContent = ''
				this.formInfo.voice = ''
				this.formInfo.voiceTime = 0
				this.formInfo.wechatNumber = ''
				this.audioState = 0
				this.playState = false
				//  执行方法 停止录音
				//  执行方法 播放
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-index {
		width: 750rpx;
		overflow-x: hidden;

		&.active {
			overflow: hidden;
		}

		.top-tips {
			color: #fff;
			overflow: hidden;
			background: rgba(22, 61, 100, .54);
			position: fixed;
			white-space: nowrap;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			width: 750rpx;
			box-sizing: border-box;

			.top-tips-text {
				white-space: nowrap;
				display: block;
				word-wrap: normal;
				width: max-content;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				transform: translateX(500rpx);
				animation: marquee2 18s infinite linear;
			}
		}

		.top {
			width: 750rpx;
			height: 934rpx;
			overflow: hidden;
			position: relative;

			.topBg {
				width: 750rpx;
				height: 934rpx;
			}

			.round {
				width: 620rpx;
				height: 620rpx;
				position: absolute;
				top: 280rpx;
				left: 65rpx;
				animation: rotate 4s linear infinite;
			}

			.icon1 {
				width: 71rpx;
				height: 260rpx;
				position: absolute;
				top: 380rpx;
				left: 560rpx;
				animation: play1 7s linear infinite;
			}

			.icon2 {
				width: 71rpx;
				height: 266rpx;
				position: absolute;
				top: 390rpx;
				left: 60rpx;
				animation: play2 7s linear infinite;
			}

			.icon3 {
				width: 71rpx;
				height: 258rpx;
				position: absolute;
				top: 310rpx;
				left: 260rpx;
				animation: play1 7s linear infinite;
			}
		}

		.birth {
			width: 750rpx;
			height: 1020rpx;
			margin-top: -280rpx;
			position: relative;
			color: #26639d;
			font-size: 28rpx;

			&.active {
				height: 1321rpx;
			}

			.bg {
				width: 750rpx;
				position: relative;
				position: absolute;
				top: 0;
				left: 0;

				&.bg1 {
					height: 1321rpx;
				}

				&.bg2 {
					height: 1020rpx;
				}
			}

			.swiper-box {
				position: absolute;
				top: 220rpx;
				left: 0;
				z-index: 9;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.swiper {
					width: 480rpx;
					height: 100rpx;
					color: #81b3ff;
					padding: 0 10rpx;
					box-sizing: border-box;

					.img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50rpx;
						margin-right: 20rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
						}
					}
				}

			}

			.total-num {
				flex: 1;
				color: #81b3ff;
				font-size: 26rpx;
				padding-left: 20rpx;
				border-left: 2rpx solid #81b3ff;
			}

			.form-name {
				position: absolute;
				left: 200rpx;
				top: 445rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 19;

				input {
					display: block;
					width: 500rpx;
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}

			.form-sex {
				position: absolute;
				left: 200rpx;
				top: 542rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 19;

				.sex-item {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 56rpx;
					width: 146rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 56rpx;
					border-radius: 28rpx;
					color: #fff;
					background: #b2c6dc;

					&.active {
						background: #ff9d33;
					}

					image {
						width: 30rpx;
						margin-right: 15rpx;
					}
				}

			}

			.form-birthday {
				position: absolute;
				left: 200rpx;
				top: 642rpx;
				width: 400rpx;
				height: 80rpx;
				z-index: 19;

				input {
					display: block;
					width: 500rpx;
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}
			}

			.needJh {
				position: absolute;
				top: 720rpx;
				left: 0;
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.title {


					font-size: 30rpx;
					margin-right: 40rpx;
				}

				.chooseSlider {
					width: 280rpx;
					height: 40rpx;
					border-radius: 30rpx;
					background: #b2c6dc;
					position: relative;

					view {
						position: absolute;
						left: 0;
						top: -10rpx;
						width: 180rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 4rpx solid #fff;
						transition: .3s linear all;
						box-sizing: border-box;

						&.active {
							left: 100rpx;

							text {
								color: #fff;
								border: 10rpx solid #163d64;
								background: #163d64;
							}
						}

						text {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							height: 100%;
							background: #b2c6dc;
							border-radius: 30rpx;
							border: 10rpx solid #97b4d4;
							color: #fff;
							box-sizing: border-box;
						}
					}
				}
			}

			.title-btn {
				position: absolute;
				top: 860rpx;
				left: 50%;
				transform: translate(-50%, 0);
				display: block;
				width: 320rpx;
				height: 45rpx;
			}

			.desc-btn-list {
				position: absolute;
				top: 940rpx;
				left: 60rpx;
				right: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.desc-btn {
					display: block;
					width: 314rpx;
					height: 136rpx;
				}
			}

			.desc-text {
				display: block;
				position: absolute;
				top: 820rpx;
				left: 50rpx;
				right: 50rpx;

				.desc-title {
					font-size: 21rpx;
					line-height: 150%;
					color: #65768b;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.text-info {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					height: 250rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background: #fff;
					box-sizing: border-box;

					.back-btn {
						display: block;
						width: 64rpx;
						height: 41rpx;
					}

					textarea {
						display: block;
						width: 100%;
						height: 160rpx;
						border: 0;
						font-size: 26rpx;
						line-height: 150%;
						color: #26639d;
						box-sizing: border-box;
					}
				}
			}

			.desc-audio {
				display: block;
				position: absolute;
				top: 820rpx;
				left: 50rpx;
				right: 50rpx;

				.desc-title {
					font-size: 21rpx;
					line-height: 150%;
					color: #65768b;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.text-info {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					height: 250rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background: #fff;
					box-sizing: border-box;

					.back-btn {
						display: block;
						width: 64rpx;
						height: 41rpx;
					}

					.play-audio {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 15rpx 20rpx;
						background: #26639d;
						border-radius: 10rpx;

						.audio-play {
							width: 35rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						.audio-gif {
							width: 120rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						.audio-png {
							width: 120rpx;
							height: 35rpx;
							display: block;
							margin-right: 20rpx;
						}

						text {
							font-size: 26rpx;
							line-height: 35rpx;
							color: #fff;
						}
					}

					.star-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {
							display: block;
							width: 100rpx;
							height: 100rpx;
							margin: 0 auto 30rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}

					.ing-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {

							display: block;
							width: 205rpx;
							height: 90rpx;
							margin: 0 auto 30rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}

					.end-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-direction: column;

						image {
							display: block;
							width: 50rpx;
							height: 50rpx;
							margin: 0 auto 10rpx;
						}

						view {
							font-size: 26rpx;
							line-height: 35rpx;
						}
					}
				}
			}


			.tips {
				position: absolute;
				bottom: 80rpx;
				left: 80rpx;
				right: 80rpx;
				line-height: 140%;
				font-size: 21rpx;
				text-align: justify;
				color: rgb(122, 148, 173);
			}

		}

		.btn {
			width: 750rpx;
			margin: 20rpx 0;

			.indexBtn {
				width: 673rpx;
				height: 114rpx;
				margin-left: 39rpx;
				animation: big 2s linear infinite;
			}
		}

		.desc {
			.desc-img {
				width: 750rpx;
			}

			.m-box {
				position: relative;
				width: 700rpx;
				margin: 50rpx auto 0;
				border-radius: 6rpx;
				padding: 85rpx 10rpx 20rpx;
				background: url(https://ydh5res.onlineweixin.com/cy/index_files/gundong.png?v=20201205132101458) no-repeat;
				background-size: 100% 100%;

				.m-box__title {
					color: #fff8e6;
					text-align: center;
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					background: url(https://ydh5res.onlineweixin.com/cy/index_files/gd-title.png?v=20201205101321458) no-repeat top center;

					background-size: auto 70rpx;
					font-size: 36rpx;
					position: absolute;
					left: 50%;
					top: -12rpx;
					transform: translateX(-50%);
					font-weight: 700
				}

				.user_feedback {
					height: 460rpx;
					overflow: hidden;

					margin: 0 20rpx;

					.uf_ul {
						position: relative;
						top: 0;

						.li {
							overflow: hidden;
							border-bottom: 2rpx dashed #4d577d;
							padding: 30rpx 0;
							font-size: 30rpx;

							text {
								display: inline-block;
								color: #0066ff;
								font-weight: 700
							}
						}
					}
				}
			}
		}

		.scrollBtn {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(172, 188, 210, 0.6);
			width: 750rpx;
			height: 140rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			image {
				width: 673rpx;
				height: 114rpx;

				animation: big 2s linear infinite;
			}
		}

		.public_footer_help {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 30rpx;
			color: #fff;

		}
	}

	.right-btn {
		position: fixed;
		right: 0;
		top: 10vh;
		background: rgba(0, 0, 0, .5);
		padding: 10rpx;
		border-radius: 10rpx 0 0 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		view {
			width: 40rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
		}
	}
</style>